typescript baice type 一

string:

function greeter(person: string) {
    return "Hello, " + person;
}

var user = "Jane User";

document.body.innerHTML = greeter(user);

Array:

function greeter(person: string) {
    return "Hello, " + person;
}

var user = [0, 1, 2];

document.body.innerHTML = greeter("C" + user[0]);

interface(感觉和结构体很像,注意它是变量名称放在前面,类型放在后面):

interface Person {
    firstname: string;
    lastname: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstname + " " + person.lastname;
}

var user = { firstname: "Jane", lastname: "User" };

document.body.innerHTML = greeter(user);

class, 里面的构造器和公共成员变量有些特别(跟C#的写法不一样),类没有作用域区分,会检查成员变量作用域,希望以后的版本能完善,接口还能parse这些class, 还不知道接口能不能定义方法。

class Student {
    fullname : string;
    constructor(public firstname, public middleinitial, public lastname) {
        this.fullname = firstname + " " + middleinitial + " " + lastname;
    }
}

interface Person {
    firstname: string;
    lastname: string;  
}

function greeter(person : Person) {
    return "Hello, " + person.firstname + " " + person.lastname;
}

var user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

我们来看一下它生成的JavaScript代码, 实例化的Student调用了一个闭包函数并将成员变量转换成Student的node就变成了这样一个链条变量,没有作用域哦,其他的都在typescript里面帮我们写好,就像一个模板一样,可以写一些更抽象的东西(比如说链表,还没测试这个会生成什么样子)。Map这个文件可能是给调试用的:

var Student = (function () {
    function Student(firstname, middleinitial, lastname) {
        this.firstname = firstname;
        this.middleinitial = middleinitial;
        this.lastname = lastname;
        this.fullname = firstname + " " + middleinitial + " " + lastname;
    }
    return Student;
})();
function greeter(person) {
    return "Hello, " + person.firstname + " " + person.lastname;
}
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);
//# sourceMappingURL=greeter.js.map
{"version":3,"file":"greeter.js","sourceRoot":"","sources":["greeter.ts"],"names":["Student","Student.constructor","greeter"],"mappings":"AAAA;IAEIA,iBAAmBA,SAASA,EAAUA,aAAaA,EAAUA,QAAQA;QAAlDC,cAASA,GAATA,SAASA,CAAAA;QAAUA,kBAAaA,GAAbA,aAAaA,CAAAA;QAAUA,aAAQA,GAARA,QAAQA,CAAAA;QACjEA,IAAIA,CAACA,QAAQA,GAAGA,SAASA,GAAGA,GAAGA,GAAGA,aAAaA,GAAGA,GAAGA,GAAGA,QAAQA,CAACA;IACrEA,CAACA;IACLD,cAACA;AAADA,CAACA,AALD,IAKC;AAOD,iBAAiB,MAAe;IAC5BE,MAAMA,CAACA,SAASA,GAAGA,MAAMA,CAACA,SAASA,GAAGA,GAAGA,GAAGA,MAAMA,CAACA,QAAQA,CAACA;AAChEA,CAACA;AAED,IAAI,IAAI,GAAG,IAAI,OAAO,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;AAE7C,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC"}
时间: 2024-10-11 02:14:13

typescript baice type 一的相关文章

[TypeScript] Create Explicit and Readable Type Declarations with TypeScript mapped Type Modifiers

Using the optional “+” sign together with mapped type modifiers, we can create more explicit and readable type declarations. We can also use the “-” (minus) sign to remove optional declarations from properties. For example, we have an interface: inte

Angular 2: Why TypeScript?

https://vsavkin.com/writing-angular-2-in-typescript-1fa77c78d8e8 Angular 2 is written in TypeScript. In this article I will talk about why we made the decision. I'll also share my experience of working with TypeScript: how it affects the way I write

[TypeScript] Restrict null and undefined via Non-Nullable-Types in TypeScript

This lesson introduces the --strictNullChecks compiler option and explains how non-nullable types differ from nullable types. It also illustrates how you can write safer code by being explicit about null and undefined in the type system. First of all

TypeScript 上手教程

无疑,对于大型项目来说,Vanilla Js 无法满足工程需求.早在 2016 年 Anuglar 在项目中引入 TypeScript 时,大概也是考虑到强类型约束对于大型工程的必要性,具体选型考虑可参考这篇文章.然后可以看到 TypeScript 在社区中逐渐升温.但凡社区中举足轻重的库,如果不是原生使用 TypeScript 编写,那么也是通过声明文件的方式对 TypeScript 提供支持,比如 React(虽然不是包含在官方仓库中,而是通过 @types/react),同时官方脚手架工具

TypeScript + node.js + github.api, 实现github快速找到目标用户

一.TypeScript简介 1.定义 (1)Typescript = JavaScript + type + ( some other stuff ) (2)Typescript需要先被编译成Javascript,而后才能使用 2.demo 安装typescript: npm install typescript –g tsc index.ts index.ts: var fn = () => ‘response’ command line: tsc init 修改tsconfig.json的

[Angular 2] 9. Value Providers & @Inject

Dependecies aren’t always objects created by classes or factory functions. Sometimes, all we really want is inject a simple value, which can be a primitive, or maybe just a configuration object. For these cases, we can use value providers and in this

All About Angular 2.0

angular All About Angular 2.0 Posted by Rob Eisenberg on  November 6th, 2014. Have questions about the strategy for Angular 2.0? This is the place. In the following article I'll explain the major feature areas of Angular 2.0 along with the motivation

VSCode tasks.json中的各种替换变量的意思 ${workspaceFolder} ${file} ${fileBasename} ${fileDirname}等

When authoring tasks configurations, it is often useful to have a set of predefined common variables. VS Code supports variable substitution inside strings in the tasks.json file and has the following predefined variables: ${workspaceFolder} the path

jquery_ui

/*! jQuery UI - v1.10.4 - 2014-01-17 * http://jqueryui.com * Includes: jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.position.js, jquery.ui.accordion.js, jquery.ui.autocomplete.js, jquery.ui.button.js, jquery.ui.datepicker.js,