TypeScript超详细入门教程（上）开发者社区

TypeScript超详细入门教程（上）

        const getResult = 
       input => { 
        }

    function getResult (input: string): number
    function getResult (input: number): string
    function getResult <T>(input: T): T
    function getResult (input: any): any {
    if (typeof input === 'string') return input.length
    else if (typeof input === 'number') return input.toString()
    else return input
    }

    {
    "tslint.configFile": "./tslint.json",
    "tslint.autoFixOnSave": true,
    "editor.formatOnSave": true
    }

    {
    // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
    // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
    // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
    // Placeholders with the same ids are connected.
    // Example:
    // "Print to console": { 
    // "scope": "javascript,typescript",
    // "prefix": "log",
    // "body": [
    // "console.log('$1');",
    // "$2"
    // ],
    // "description": "Log output to console"
    }

    npm install -g tslint

    mkdir client-side
    cd client-side

    # 使用npm默认package.json配置
    npm init -y
    # 或者使用交互式自行配置，遇到选项如果直接敲回车即使用括号内的值
    npm init
    package name: (client-side) # 可敲回车即使用client-side这个名字，也可输入其他项目名
    version: (1.0.0) # 版本号，默认1.0.0
    description: # 项目描述，默认为空
    entry point: (index.js) # 入口文件，我们这里改为./src/index.ts
    test command: # 测试指令，默认为空
    git repository: # git仓库地址，默认为空
    keywords: # 项目关键词，多个关键词用逗号隔开，我们这里写typescript,client,lison
    author: # 项目作者，这里写lison<lison16new@163.com>
    license: (ISC) # 项目使用的协议，默认是ISC，我这里使用MIT协议
    # 最后会列出所有配置的项以及值，如果没问题，敲回车即可。

    npm install typescript -g

    tsc --init

npm install typescript

npm install tslint -g

tslint -i

    {
    "defaultSeverity": "error",
    "extends": [
    "tslint:recommended"
    "jsRules": {},
    "rules": {},
    "rulesDirectory": []
    }

npm install webpack webpack-cli webpack-dev-server -D

    {
    "scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config build/webpack.config.js"
    }

npm install cross-env

    const HtmlWebpackPlugin = require( "html-webpack-plugin");
    const { CleanWebpackPlugin } = require( "clean-webpack-plugin");
    module. exports = {
    // 指定入口文件
    // 这里我们在src文件夹下创建一个index.ts
    entry: "./src/index.ts",
    // 指定输出文件名
    output: {
    filename: "main.js"
    resolve: {
    // 自动解析一下拓展，当我们要引入src/index.ts的时候，只需要写src/index即可
    // 后面我们讲TS模块解析的时候，写src也可以
    extensions: [ ".tsx", ".ts", ".js"]
    module: {
    // 配置以.ts/.tsx结尾的文件都用ts-loader解析
    // 这里我们用到ts-loader，所以要安装一下
    // npm install ts-loader -D
    rules: [
    test: /\.tsx?$/,
    use: "ts-loader",
    exclude: /node modules/
     // 指定编译后是否生成source-map，这里判断如果是生产打包环境则不生产source-map
     devtool: process.env.NODEENV === "production" ? false : "inline-source-map",
    // 这里使用webpack-dev-server，进行本地开发调试
    devServer: {
    contentBase: "./dist",
    stats: "errors-only",
    compress: false,
    host: "localhost",
    port: 8089
    // 这里用到两个插件，所以首先我们要记着安装
    // npm install html-webpack-plugin clean-webpack-plugin -D
    plugins: [
    // 这里在编译之前先删除dist文件夹
    new CleanWebpackPlugin({
    cleanOnceBeforeBuildPatterns: [ "./dist"]
    // 这里我们指定编译需要用模板，模板文件是./src/template/index.html，所以接下来我们要创建一个index.html文件
    new HtmlWebpackPlugin({
    template: "./src/template/index.html"
    };

    <!DOCTYPE html>
    <html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>TS-Learning </title>
    </head>
    <body> </body>
    </html>

npm run start

    // index.ts
    let a: number = 123;
    const h1 = document.createElement( "h1");
    h1.innerHTML = "Hello, I am Lison";
    document.body.appendChild(h1);

    {
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE ENV=development webpack-dev-server --mode=development --config ./build/webpack.config.js",
     "build": "cross-env NODE ENV=production webpack --mode=production --config ./build/webpack.config.js"
    }

npm run build

    let num: number = 123

    let num = 123
    num = 'abc' // error 不能将类型“ "123"”分配给类型“number”

    let bool: boolean = false;
    bool = true;
    bool = 123; // error 不能将类型"123"分配给类型"boolean"

    let bool: boolean = !! 0
    console. log( bool) // false

    let num: number;
    num = 123;
    num = "123"; // error 不能将类型 "123"分配给类型 "number"
    num = 0b 1111011; // 二进制的 123
    num = 0o 173; // 八进制的 123
    num = 0x 7b; // 十六进制的 123

    let str: string = "Lison";
    str = "Li";
    const first = "Lison";
    const last = "Li";
str = 
${first} ${last};
    console.log( str) // 打印结果为:Lison Li

    let str: 'Lison'
    str = 'haha' // error 不能将类型“ "haha"”分配给类型“ "Lison"”

    let list1: number[] = [ 1, 2, 3] ;
    let list2: Array<number> = [ 1, 2, 3] ;

    let u: undefined = undefined; // 这里可能会报一个tslint的错误：Unnecessary initialization to 'undefined'，就是不能给一个值赋 undefined，但我们知道这是可以的，所以如果你的代码规范想让这种代码合理化，可以配置tslint，将 "no-unnecessary-initializer"设为 false即可
    let n: null = null;

    let strInit = "abc";
    let strClone = strInit;
    strClone = "efg";
    console.log(strInit); // 'abc'
    let objInit = { a: "aa" };
    let objClone = objInit;
    console.log(objClone) // {a:"aa"}
    objInit.a = "bb";
    console.log(objClone); // { a: 'bb' }

    let obj: object
    obj = { name: 'Lison' }
    obj = 123 // error 不能将类型“123”分配给类型“object”

    let obj: object
    obj = { name: 'Lison' }
    console.log(obj.name) // error 类型“object”上不存在属性“name”

    function getKeys (obj: object) {
    return Object.keys(obj) // 会以列表的形式返回obj中的值
    getKeys({ a: 'a' }) // ['a']
    getKeys( 123) // error 类型“123”的参数不能赋给类型“object”的参数

    let tuple: [ string, number, boolean];
    tuple = [ "a", 2, false];
    tuple = [ 2, "a", false]; // error 不能将类型“number”分配给类型“ string”。 不能将类型“ string”分配给类型“number”。
    tuple = [ "a", 2]; // error Property '2' is missing in type '[string, number]' but required in type '[string, number, boolean]'

    tuple[ 1] = 3;

    tuple [0] .split( ":"); // right 类型"string"拥有属性"split"
    tuple [1] .split( ":"); // error 类型“number”上不存在属性“split”

    let tuple: [ string, number];
    tuple = [ "a", 2]; // right 类型和个数都对应，没问题
    // 2.6版本之前如下也不会报错
    tuple = [ "a", 2, "b"];
    // 2.6版本之后如下会报错
    tuple = [ "a", 2, "b"]; // error 不能将类型“[string, number, string]”分配给类型“[string, number]”。 属性“length”的类型不兼容。

    interface Tuple extends Array<number | string> {
    0: string;
    1: number;
    length: 2;
    }

    interface Tuple extends Array<number | string> {
    0: string;
    1: number;
    }

    enum Roles { 
    SUPER_ADMIN,
    ADMIN,
    }

    enum Roles { 
    SUPER_ADMIN = 0,
    ADMIN = 1,
    USER = 2
    }

    const superAdmin = Roles.SUPER_ADMIN;
    console. log(superAdmin); // 0

    enum Roles { 
    SUPER_ADMIN = 1,
    ADMIN,
    }

    enum Roles { 
    SUPER_ADMIN = 1,
    ADMIN = 3,
    USER = 7
    }

    console.log(Roles[ 3]); // 'ADMIN'

    let value: any;
    value = 123;
    value = "abc";
    value = false;

    const array: any[] = [ 1, "a", true];

    const consoleText = (text: string): void => {
    console.log(text);
    };

    const errorFunc = (message: string): never => {
    throw new Error(message);
    };

    const infiniteFunc = (): never => {
    while ( true) {}
    };

    let neverVariable = (() => {
    while ( true) {}
    })();
    neverVariable = 123; // error 不能将类型 "number"分配给类型 "never"

    let value: any
    console .log( value .name)
    console .log( value .toFixed())
    console .log( value .length)

    const merge = <T, U>(arg1: T, arg2: U): T & U => {
    let res = <T & U>{}; // 这里指定返回值的类型兼备T和U两个类型变量代表的类型的特点
    res = Object.assign(arg1, arg2); // 这里使用Object.assign方法，返回一个合并后的对象；
    // 关于该方法，请在例子下面补充中学习
    return res;
    const info1 = {
    name: "lison"
    const info2 = {
    age: 18
    const lisonInfo = merge(info1, info2);
    console.log(lisonInfo.address); // error 类型“{ name: string; } & { age: number; }”上不存在属性“address”

    const getLength = (content: string | number): number => {
    if ( typeof content === "string") return content.length;
    else return content.toString().length;
    console.log(getLength( "abc")); // 3
    console.log(getLength( 123)); // 3

    枚举声明只能与命名空间或其他枚举声明合并

    const s = Symbol();
    typeof s; // 'symbol'

    const s1 = Symbol( "lison");
    const s2 = Symbol( "lison");
    console.log(s1 === s2); // false
    // 补充：这里第三行代码可能会报一个错误：This condition will always return 'false' since the types 'unique symbol' and 'unique symbol' have no overlap.
    // 这是因为编译器检测到这里的s1 === s2始终是false，所以编译器提醒你这代码写的多余，建议你优化。

    const s1 = Symbol( "lison");
    console.log(s1.toString()); // 'Symbol(lison)'

    let s = Symbol( "lison");
    console.log(s.toString()); // 'Symbol(lison)'
    console.log( Boolean(s)); // true
    console.log(!s); // false

    let prop = "name";
    const obj = {
    [prop]: "Lison"
    console.log(obj.name); // 'Lison'

    let name = Symbol();
    let obj = {
    [name]: "lison"
    console.log(obj); // { Symbol(): 'lison' }

    console.log(obj[ name]); // 'lison'
    console.log(obj. name); // undefined

    const name = Symbol( "name");
    const obj = {
    [name]: "lison",
    age: 18
    for ( const key in obj) {
    console.log(key);
    // => 'age'
    console.log( Object.keys(obj));
    // ['age']
    console.log( Object.getOwnPropertyNames(obj));
    // ['age']
    console.log( JSON.stringify(obj));
    // '{ "age": 18 }'

    const name = Symbol( "name");
    const obj = {
    [name]: "lison",
    age: 18
    const SymbolPropNames = Object.getOwnPropertySymbols(obj);
    console.log(SymbolPropNames);
    // [ Symbol(name) ]
    console.log(obj[SymbolPropNames[ 0]]);
    // 'lison'
    // 如果最后一行代码这里报错提示：元素隐式具有 "any" 类型，因为类型“{ [name]: string; age: number; }”没有索引签名。 那可能是在tsconfig.json里开启了noImplicitAny。因为这里我们还没有学习接口等高级类型，所以你可以先忽略这个错误，或者关闭noImplicitAny。

    const name = Symbol( "name");
    const obj = {
    [name]: "lison",
    age: 18
    console.log( Reflect.ownKeys(obj));
    // [ 'age', Symbol(name) ]

    const s1 = Symbol( "lison");
    const s2 = Symbol( "lison");
    const s3 = Symbol.for( "lison");
    const s4 = Symbol.for( "lison");
    s3 === s4; // true
    s1 === s3; // false
    // 这里还是会报错误：This condition will always return 'false' since the types 'unique symbol' and 'unique symbol' have no overlap.还是我们说过的，因为这里的表达式始终是true和false，所以编译器会提示我们。

    const iframe = document.createElement( "iframe");
    iframe.src = String( window.location);
    document.body.appendChild(iframe);
    iframe.contentWindow. Symbol. for( "lison") === Symbol. for( "lison"); // true
    // 注意：如果你在JavaScript环境中这段代码是没有问题的，但是如果在TypeScript开发环境中，可能会报错：类型“Window”上不存在属性“ Symbol”。
    // 因为这里编译器推断出iframe.contentWindow是Window类型，但是TypeScript的声明文件中，对Window的定义缺少 Symbol这个字段，所以会报错，所以你可以这样写：
    // (iframe.contentWindow as Window & { Symbol: SymbolConstructor }). Symbol. for( "lison") === Symbol. for( "lison")
    // 这里用到了类型断言和交叉类型，SymbolConstructor是内置的类型。

    const sym = Symbol.for( "lison");
    console.log( Symbol.keyFor(sym)); // 'lison'

    const obj = {
    [ Symbol.hasInstance]( otherObj) {
     console.log(otherObj);
    console.log({ a: "a" } instanceof obj); // false
    // 注意：在TypeScript中这会报错，"instanceof" 表达式的右侧必须属于类型 "any"，或属于可分配给 "Function" 接口类型的类型。
    // 是要求你instanceof操作符右侧的值只能是构造函数或者类，或者类型是any类型。这里你可以使用类型断言，将obj改为obj as any

    let arr = [ 1, 2];
    console.log([].concat(arr, [ 3, 4])); // 打印结果为[1, 2, 3, 4]，length为4
    let arr1 = [ "a", "b"];
    console.log(arr1[ Symbol.isConcatSpreadable]); // undefined
    arr1[ Symbol.isConcatSpreadable] = false;
    console.log(arr1[ Symbol.isConcatSpreadable]); // false
    console.log([].concat(arr1, [ 3, 4])); // 打印结果如下：
     [ ["a", "b", Symbol(Symbol.isConcatSpreadable): false], 3, 4 ]
     最外层这个数组有三个元素，第一个是一个数组，因为我们设置了arr1[Symbol.isConcatSpreadable] = false
     所以第一个这个数组没有被扁平化，第一个元素这个数组看似是有三个元素，但你在控制台可以看到这个数组的length为2
     Symbol(Symbol.isConcatSpreadable): false不是他的元素，而是他的属性，我们知道数组也是对象，所以我们可以给数组设置属性
     你可以试试如下代码，然后看下打印出来的效果：
     let arr = [1, 2]
     arr.props = 'value'
     console.log(arr)
     /

    class C extends Array {
    getName() {
    return "lison";
    const c = new C( 1, 2, 3);
    const a = c.map( item => item + 1);
    console.log(a); // [2, 3, 4]
    console.log(a instanceof C); // true
    console.log(a instanceof Array); // true
    console.log(a.getName()); // "lison"

    class C extends Array {
    static get [ Symbol.species]() {
    return Array;
    getName() {
    return "lison";
    const c = new C( 1, 2, 3);
    const a = c.map( item => item + 1);
    console.log(a); // [2, 3, 4]
    console.log(a instanceof C); // false
    console.log(a instanceof Array); // true
    console.log(a.getName()); // error a.getName is not a function

    let obj = {
    [ Symbol.match]( string) {
     return string.length;
    console.log("abcde".match(obj)); // 5

    const arr = [1, 2, 3];
    const iterator = arr[ Symbol.iterator]( );
    console.log(iterator);
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());

    let obj = {
    [ Symbol.toPrimitive]( type) {
     console.log(type);
    // const b = obj++ // number
const a =  
abc${obj} 
; // string

    let obj = {
    [Symbol.toStringTag]: "lison"
    obj.toString(); // "[object lison]"
    let obj2 = {
    get [ Symbol.toStringTag]( ) {
     return "haha";
    obj2.toString(); // "[object haha]"

    const obj = {
    a: "a",
    b: "b"
    with (obj) {
    console.log(a); // "a"
    console.log(b); // "b"
    // 如果是在TypeScript开发环境中，这段代码可能with会报错：不支持 "with" 语句，这是因为在严格模式下，是不允许使用with的。

    console.log(Array.prototype[Symbol.unscopables]);
     copyWithin: true
     entries: true
     fill: true
     find: true
     findIndex: true
     includes: true
     keys: true
     values: true
    /

    let sym: symbol = Symbol()

    const key1: unique symbol = Symbol()
    let key2: symbol = Symbol()
    const obj = {
    [key1]: 'value1',
    [key2]: 'value2'
    console.log(obj[key1])
    console.log(obj[key2]) // error 类型“symbol”不能作为索引类型使用。

    enum Status {// 这里你的TSLint可能会报一个：枚举声明只能与命名空间或其他枚举声明合并。这样的错误，这个不影响编译，声明合并的问题我们在后面的小节会讲。
    Uploading,
    Success,
    Failed
    console.log(Status.Uploading); // 0
    console.log(Status[ "Success"]); // 1
    console.log(Status.Failed); // 2

    // 修改起始编号
    enum Color {
    Red = 2,
    Blue,
    Yellow
    console.log(Color.Red, Color.Blue, Color.Yellow); // 2 3 4
    // 指定任意字段的索引值
    enum Status {
    Success = 200,
    NotFound = 404,
    Error = 500
    console.log(Status.Success, Status.NotFound, Status.Error); // 200 404 500
    // 指定部分字段，其他使用默认递增索引
    enum Status {
    Ok = 200,
    Created,
    Accepted,
    BadRequest = 400,
    Unauthorized
    console.log(Status.Created, Status.Accepted, Status.Unauthorized); // 201 202 401

    const getValue = () => {
    return 0;
    enum ErrorIndex { 
    a = getValue(),
    b, // error 枚举成员必须具有初始化的值
    enum RightIndex { 
    a = getValue(),
    b = 1,
    const Start = 1;
    enum Index { 
    a = Start,
    b, // error 枚举成员必须具有初始化的值
    }

    enum Status { 
    Success = 200,
    NotFound = 404,
    Error = 500
    console.log(Status[ "Success"]); // 200
    console.log(Status[ 200]); // 'Success'
    console.log(Status[Status[ "Success"]]); // 'Success'

    enum Message { 
    Error = "Sorry, error",
    Success = "Hoho, success"
    console.log(Message.Error); // 'Sorry, error'

    enum Message { 
    Error = "error message",
    ServerError = Error,
    ClientError = Error
    console.log(Message.Error); // 'error message'
    console.log(Message.ServerError); // 'error message'

    enum Result { 
    Faild = 0,
    Success = "Success"
    }

    enum Animal {
    Dog = 1,
    Cat = 2
    interface Dog {
    type: Animal.Dog; // 这里使用Animal.Dog作为类型，指定接口Dog的必须有一个type字段，且类型为Animal.Dog
    interface Cat {
    type: Animal.Cat; // 这里同上
    let cat1: Cat = {
    type: Animal.Dog // error [ts] 不能将类型“Animal.Dog”分配给类型“Animal.Cat”
    let dog: Dog = {
    type: Animal.Dog
    };

    enum Status { 
    interface Light {
    status: Status;
    enum Animal { 
    Dog = 1,
    Cat = 2
    const light1: Light = {
    status: Animal.Dog / / error 不能将类型“Animal.Dog”分配给类型“Status”
    const light2: Light = { 
     status: Status.Off
    const light3: Light = { 
     status: Status.On
    };

    enum E { 
    const getIndex = ( enumObj: { A: number }): number => {
    return enumObj.A;
    console.log(getIndex(E)); // 0

    {
    0: "A",
    1: "B",
    A: 0,
    }

    enum Status { 
    const enum Animal { 
    const status = Status.On;
    const animal = Animal.Dog;

    var Status;
    ( function(Status) {
    Status[(Status[ "Off"] = 0)] = "Off";
    Status[(Status[ "On"] = 1)] = "On";
    })(Status || (Status = {}));
    var status = Status.On;
    var animal = 0; /  Dog  /

    const getLength = target => {
    if (target.length) {
    return target.length;
    } else {
    return target.toString().length;
    };

    const getLength = (target: string | number): number => {
    if (target.length) { // error 报错信息看下方
    return target.length; // error 报错信息看下方
    } else {
    return target.toString().length;
    };

    // 类型 "string | number"上不存在属性 "length"
    // 类型 "number"上不存在属性 "length"

    const getStrLength = (target: string | number): number => {
    if ((< string>target).length) { // 这种形式在JSX代码中不可以使用，而且也是TSLint不建议的写法
    return (target as string).length; // 这种形式是没有任何问题的写法，所以建议大家始终使用这种形式
    } else {
    return target.toString().length;
    };

    // 注：这段代码为纯JavaScript代码，请在JavaScript开发环境编写下面代码，在TypeScript环境会报一些类型错误
    const getFullName = ({ firstName, lastName }) => {

TypeScript超详细入门教程（上）

TypeScript超详细入门教程（上）

TypeScript超详细入门教程（上）

01 开篇词：Hello~TypeScript

02 TypeScript应该怎么学

1.2.1 学会看文档

1.2.2 学会看报错

1.2.3 学会看声明文件

1.2.4 学会搜问题和提问

1.2.5 看优秀项目源码

03 VSCode揭秘和搭建开发环境

1.3.1 安装和基本配置

1.3.2 常用功能

1.3.3 搭建开发环境

04 八个JS中你见过的类型

2.1.1 布尔类型

2.1.2 数值类型

2.1.3 字符串

2.1.4 数组

2.1.5 null 和 undefined

2.1.6 object

2.1.6 symbol

本节小结

05 TS中补充的六个类型

2.2.1 元组

2.2.2 枚举

2.2.3 Any

2.2.4 void

2.2.5 never

2.2.6 unknown

2.2.7 拓展阅读

补充说明

小结

06 Symbol-ES6新基础类型

2.3.1 作为属性名

2.3.2 属性名的遍历

2.3.3 Symbol.for()和 Symbol.keyFor()

2.3.4 11 个内置 symbol 值

2.3.5 在TypeScript中使用symbol类型

小结

07 深入学习枚举

2.4.1. 数字枚举

2.4.2. 反向映射

2.4.3. 字符串枚举

2.4.4. 异构枚举

2.4.5. 枚举成员类型和联合枚举类型

2.4.6. 运行时的枚举

2.4.7. const enum

小结

08 使用类型断言达到预期

小结

09 使用接口定义几乎任意结构

2.6.1. 基本用法