TypeScript安装及语法使用

  1. 一、安装并初始化TypeScript
    1. 1、全局安装
    2. 2、初始化TypeScript(创建tsconfig.json)
    3. 3、安装ts-loader解析ts文件
  2. 二、TypeScript变量与数据类型
    1. 1、原有类型:
    2. 2、新增类型:
  3. 三、TypeScript定义数据类型
    1. 1、字符串
    2. 2、数值
    3. 3、布尔值
    4. 4、undefined && null
    5. 5、数组
    6. 6、元组
    7. 7、枚举
    8. 8、any(任意类型)
    9. 9、void(没有类型)
    10. 10、never(不存在的值的类型)
  4. 四、TypeScript数据类型——类型推断
    1. 1、概念:
    2. 2、验证:
  5. 五、TypeScript数据类型——联合类型(或)
    1. 1、概念:
    2. 2、示例:
  6. 六、TypeScript函数——返回值和参数
    1. 1、函数的返回值:
    2. 2、函数形参类型
  7. 七、TypeScript函数——可选参数
    1. 1、函数可选参数
  8. 八、TypeScript函数——默认值
    1. 1、函数默认值
  9. 九、TypeScript函数——剩余参数
    1. 1、问题
  10. 十、TypeScript接口定义——对象类型接口
    1. 1、什么是接口?
    2. 2、示例:
  11. 十一、TypeScript接口——接口继承
    1. 1、单个接口继承(extends):
    2. 2、多个接口继承(extends && ,):
    3. 3、typescript中的与可以使用多个定义的接口(&):
  12. 十二、TypeScript接口——不确定属性
    1. 1、定义不确定属性:
    2. 2、实现不确定属性:
  13. 十三、TypeScript接口——接口实现(implements)
    1. 1、定义接口:
    2. 2、接口实现:
  14. 十四、TypeScript断言——类型断言
    1. 1、使用as类型断言:
    2. 2、使用泛型语法断言:
  15. 十五、TypeScript断言——非空断言
    1. 1、非空断言实现:
  16. 十六、TypeScript——泛型
    1. 1、使用泛型语法:

目录

  1. 一、安装并初始化TypeScript
    1. 1、全局安装
    2. 2、初始化TypeScript(创建tsconfig.json)
    3. 3、安装ts-loader解析ts文件
  2. 二、TypeScript变量与数据类型
    1. 1、原有类型:
    2. 2、新增类型:
  3. 三、TypeScript定义数据类型
    1. 1、字符串
    2. 2、数值
    3. 3、布尔值
    4. 4、undefined && null
    5. 5、数组
    6. 6、元组
    7. 7、枚举
    8. 8、any(任意类型)
    9. 9、void(没有类型)
    10. 10、never(不存在的值的类型)
  4. 四、TypeScript数据类型——类型推断
    1. 1、概念:
    2. 2、验证:
  5. 五、TypeScript数据类型——联合类型(或)
    1. 1、概念:
    2. 2、示例:
  6. 六、TypeScript函数——返回值和参数
    1. 1、函数的返回值:
    2. 2、函数形参类型
  7. 七、TypeScript函数——可选参数
    1. 1、函数可选参数
  8. 八、TypeScript函数——默认值
    1. 1、函数默认值
  9. 九、TypeScript函数——剩余参数
    1. 1、问题
  10. 十、TypeScript接口定义——对象类型接口
    1. 1、什么是接口?
    2. 2、示例:
  11. 十一、TypeScript接口——接口继承
    1. 1、单个接口继承(extends):
    2. 2、多个接口继承(extends && ,):
    3. 3、typescript中的与可以使用多个定义的接口(&):
  12. 十二、TypeScript接口——不确定属性
    1. 1、定义不确定属性:
    2. 2、实现不确定属性:
  13. 十三、TypeScript接口——接口实现(implements)
    1. 1、定义接口:
    2. 2、接口实现:
  14. 十四、TypeScript断言——类型断言
    1. 1、使用as类型断言:
    2. 2、使用泛型语法断言:
  15. 十五、TypeScript断言——非空断言
    1. 1、非空断言实现:
  16. 十六、TypeScript——泛型
    1. 1、使用泛型语法:

1

一、安装并初始化TypeScript

1、全局安装

npm install typescript tslint -g

2、初始化TypeScript(创建tsconfig.json)

tsc –init

3、安装ts-loader解析ts文件

npm install ts-loader -D


二、TypeScript变量与数据类型

1、原有类型:

  • string:字符串
  • number:数字
  • boolean:布尔
  • array:数组
  • null:空
  • undefined:未定义
  • symbol:
  • object:对象

2、新增类型:

  • tuple:元组
  • enum:枚举
  • any:任意类型
  • never:其它类型
  • void:用于标识方法返回值的类型,表示该方法没有返回值

三、TypeScript定义数据类型

1、字符串

// 字符串类型
let heroName:string = 'aa';

2、数值

// 数值类型
let age:number = 25;
age = 3.14
age = -18

3、布尔值

// 布尔值数据类型
let isSingLog:boolean = true
isSingLog = false

4、undefined && null

// undefined和null
let undef:undefined = undefined
let nul:null = null

5、数组

语法一(typescript语法):

// let 数组名:类型[] = [值1,值2]
let arr:string[] = ['aa','bb','cc']
let arr1:number[] = [1,2,3]

语法二(泛型语法):

// let 数组名:Array<类型> = [值1,值2]
let arr2:Array<string> = ['aa','bb','cc']
let arr3:Array<number> = [1,2,3]

特点:

  • 元素类型 ==> 固定
  • 长度不限制

6、元组

概念:就是一个规定了元素数量和每个元素类型的”数组”

为什么要有元组?

TypeScript 中数组元素类型必须一致,如需要不同元素,可以用元组

语法:

// 元组
let tup:[string,number,boolean] = ['aa',18,true]
let tup1:[number,string,any] = [12,'aa','aa']

特点:

  • 声明元组时,要指定元素个数
  • 声明元组时,要为每个元素规定类型

7、枚举

概念:用一组标识 来 代表 数值,方便程序员调用理解

创建枚举:

// 语法一
enum Gender{
    Boy = 1,
    Girl = 2,
    Unknown = 3
}
console.log(Gender.Boy); // 1
console.log(Gender.Girl); // 2
console.log(Gender.Unknown); // 3

// 语法二
enum Gender1{
    Boy,
    Girl,
    Unknown
}
console.log(Gender1.Boy); // 0
console.log(Gender1.Girl); // 1
console.log(Gender1.Unknown); // 2

使用枚举:

let usrSex:Gender = Gender.Boy;
console.log(usrSex); // 1

// 相等
if (usrSex === Gender.Boy) {
  console.log("相等");
} else {
    console.log("不相等");
}

8、any(任意类型)

概念:any 代表任意类型,一般在获取 *dom *的时候使用

使用场景:我们在接收用户输入 或 第三方代码库时,还不能确定会返回什么类型的值,此时也可以使用 any 类型

语法

let txtName:any = document.getElementById('txtN')

9、void(没有类型)

概念:void **代表没有类型,一般用在无返回值的函数**

语法

// 函数有返回值的时候,可以指定返回值的类型
let res = function sayHi():string {
    return '你好'
}
console.log(res());

// 函数没有返回值的时候,指定函数为void类型
function sayHi2():void {
    console.log("你好");
}
sayHi2()

10、never(不存在的值的类型)

概念:never 代表不存在的值的类型,常用作为抛出异常无限循环的函数返回类型

语法:

// 无限循环
function test():never {
    while(true){

    }
}

// 抛出异常
function test1():never {
    throw new Error('aa')
}

补充:

  • never 类型是 TypeScript 中的底部类型,所有类型都是 never 类型的父类

  • 所以 never 类型值可以赋值给任意类型的变量

let x:never = test()
let y:string = test()

四、TypeScript数据类型——类型推断

1、概念:

如果变量的声明和初始化是在同一行,可以省略掉变量类型的声明。

// let 变量值 = 值;
    ||
// let 变量名:变量类型 = 值;

2、验证:

// 此时变量age的类型被推断为number 
let age = 18
//    ||
let age:number = 18

五、TypeScript数据类型——联合类型(或)

1、概念:

表示取值可以为多种类型中的一种

let 变量名:变量类型1 | 变量类型2 = 值;

2、示例:

接收 prompt 函数的返回值

let dName:string | null = prompt("请输入内容");
console.log('hello' + dName)

六、TypeScript函数——返回值和参数

1、函数的返回值:

语法:

// 如果函数没有返回值,则定义为 void
function 函数名():返回值类型 {
    return XXX
}
let 变量名:变量类型 = 函数名();

示例(如果函数没有返回值,则定义为void):

// 函数有返回值的时候,可以指定返回值的类型
let res = function sayHi():string {
    return '你好'
}
console.log(res());

// 函数没有返回值的时候,指定函数为void类型
function sayHi2():void {
    console.log("你好");
}
sayHi2()

2、函数形参类型

语法:

function 函数名(形参1:类型,形参2:类型):返回值类型 {
    return XXX
}
let 变量名:变量类型 = 函数名(实参1,实参2)

示例:

// 实参 和 形参 的类型要一致
// 实参 和 形参 的数量要一致
function sum(a:number,b:number):number {
    return a + b    
}

sum(23,23) // 46

特点

  • 实参 和 形参 的类型要一致
  • 实参 和 形参 的数量要一致

七、TypeScript函数——可选参数

1、函数可选参数

语法:

// 可选参数的实参可传,也可以不传
function 函数名(形参 ? : 类型):返回值类型 {

}

调用:

// 可以不传递实参 
函数名()

// 可以传递实参
函数名(实参值)

八、TypeScript函数——默认值

1、函数默认值

语法:

function 函数名(形参1:类型 = 默认值1,形参2:类型 = 默认值2):返回值类型 {
    函数体
}

调用:

// 不传递实参
函数名() ==> 函数名(默认值1,默认值2)

// 传一个实参
函数名(实参1) ==> 函数名(实参1,默认值2)

//传两个实参
函数名(实参1,实参2) ==> 函数名(实参1,实参2)

// 只传第二个实参
函数名(undefined,实参2) ==> 函数名(默认值1,实参2)

注意:

// 设置了默认值的形参就不设置为可选参数了
// 因为带默认值的参数,本身也是可选参数

九、TypeScript函数——剩余参数

1、问题

function add(a:number,b:number)

十、TypeScript接口定义——对象类型接口

1、什么是接口?

在面向对象语言中,接口(Interfaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)。

TypeScript 中的接口是一个非常灵活的概念,除了可用于[对类的一部分行为进行抽象]以外,也常用于对「对象的形状(Shape)」进行描述

2、示例:

// 对象,使用接口来定义对象的类型
// interface
interface IPerson {
  name: string,
  age: number,
  sex?: string
}

let obj: IPerson = {
  name: "张三",
  age: 20,
  sex: "男"
}

十一、TypeScript接口——接口继承

1、单个接口继承(extends):

interface IPerson2 {
  name?: string,
  age?: number,
  sex?: string
}

// 接口继承extends
interface IPerson3 extends IPerson2 {
  hobby: Array<number>;
}

let obj3: IPerson3 = {
  name: 'aa',
  age: 123,
  hobby: [1, 2, 3]
}

2、多个接口继承(extends && ,):

// 定义接口
interface IPerson5 {
  name: string
}

interface IPerson6 {
  age: number
}

// 继承多个接口(接口与接口之间使用逗号相隔)
interface IPerso7 extends IPerson5, IPerson6 {
  sex: string
}

let obj4: IPerso7 = {
  name: 'aa',
  age: 64,
  sex: '男'
}

3、typescript中的与可以使用多个定义的接口(&):

// 定义接口
interface IPerson5 {
  name: string
}

interface IPerson6 {
  age: number
}

interface IPerso7 extends IPerson5, IPerson6 {
  sex: string
}

// 在typescript中与使用 & 链接
let obj5: IPerson5 & IPerson6 & IPerso7 = {
  name: 'aa',
  age: 64,
  sex: '男'
}

十二、TypeScript接口——不确定属性

1、定义不确定属性:

// 定义不确定的属性使用[]
interface IPerson3 {
  [propName: string]: any;
}

2、实现不确定属性:

let obj7: IPerson3 = {} // 不报错
let obj6: IPerson3 = {
  a: 123,
  v: true
}

十三、TypeScript接口——接口实现(implements)

1、定义接口:

interface IPerson4 {
  name: string;
  age: number;
  sex?: string;
  getName: () => string;
  getAge(): number
}

2、接口实现:

// 接口实现使用implements
class Person implements IPerson4 {
  name: string = "张三";
  age: number = 18;
  sex: string = "男";
  getName(): string {
    return this.name
  };
  getAge(): number {
    return this.age
  };
  // 类自己的方法
  sayHello(): void {
    return
  }
}

十四、TypeScript断言——类型断言

1、使用as类型断言:

// 类型断言
function getLength(str: number | string): number {
  if ((str as string).length) {
    // 方法一
    return (str as string).length
  } else {
    return str.toString().length
  };
}

2、使用泛型语法断言:

// 类型断言
function getLength(str: number | string): number {
  if ((str as string).length) {
    // 方法二
    return (<string>str).length
  } else {
    return str.toString().length
  };
}

十五、TypeScript断言——非空断言

1、非空断言实现:

// 非空断言
function fun3(arg?: string): number {
  return arg!.length
  // 相当于 return arg && arg.length;
}

fun3()

十六、TypeScript——泛型

1、使用泛型语法:

// 泛型
function func4<T>(arg: T): void{

}

func4<number>(123)
func4<string>("abc")

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:TypeScript安装及语法使用

文章字数:2.4k

本文作者:Spicy boy

发布时间:2021-02-07, 16:35:43

最后更新:2021-03-31, 10:33:07

原始链接:http://www.spicyboy.cn/2021/02/07/TypeScript%E5%AE%89%E8%A3%85%E5%8F%8A%E8%AF%AD%E6%B3%95%E4%BD%BF%E7%94%A8/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏