四川省化工建设有限公司网站,wordpress购买按钮,惠州小程序搭建,做网站公司介绍ppt1.简介(1)安装及编译安装: npm install -g typescript创建 .ts 后缀名的文件编译: tsc 文件名.ts 编译后会生成同名 .js 的文件查看: 在html文件中script引入js文件,运行查看控制台即可(2)类型注解TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式 变量或函数声…1.简介(1)安装及编译 安装: npm install -g typescript 创建 .ts 后缀名的文件 编译: tsc 文件名.ts 编译后会生成同名 .js 的文件 查看: 在html文件中script引入js文件,运行查看控制台即可(2)类型注解TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式 变量或函数声明时, 可添加类型约束, 当传入其他类型时, ts会警告, 但还是会创建js文件2.类 TypeScript支持JavaScript的新特性比如支持基于类的面向对象编程
// 类
class Student {fullName:string;// 在构造函数的参数上使用public等同于创建了同名的成员变量// firstName:string;// lastName:string;constructor(public firstName:string,public lastName:string){this.fullNamethis.firstName-this.lastName;}
}
const stu new Student(haha,11)
const show2 (mes:Stu){console.log(11111111111,mes); // Student {firstName: haha, lastName: 11, fullName: haha-11}
}
show2(stu); // 传递的是对象3.接口TypeScript的核心原则之一是对值所具有的结构进行类型检查。 有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里接口的作用就是为这些类型命名和为代码或第三方代码定义契约。 // interface 接口
interface Stu{sname: string,age: number
}
const students ( student: Stu ) {console.log(,student);
}
students({ uname: mm, age: 11 } )4.基础类型(1)Boolean布尔型// 基础数据类型 ts中会自动判断数据类型,不可重新赋值 在js中, 赋值后可重新赋值(弱类型)
// 1. Boolean 布尔类型
// let flag true 不写类型会自动推断类型
// flag abc //会报错
let flag: boolean true // 相当于 let flag true
console.log(flag); // true(2)Number数字型// 2. Number 数字
let num1: number 10
console.log(num1); // 10(3)String字符串型// 3.String 字符串类型(模板字符串)
let str hello mm~~~
let str2 heihei
console.log(str,str,\tstr2,str2); // str hello mm~~~ str2 heihei(4)Array数组型// 4. Array 数组类型
// 定义方式 1: 元素类型后接[],表由此类型元素组成的一个数组
let arr: string[] [a,b]
let num: number[] [1,2,3]
// 定义方式2: Array后接元素类型
let arr1: Arraystring [haha,heihei]
console.log(arr,arr,\tnum,num,\tarr1,arr1); //arr (2) [a, b] num (3) [1, 2, 3] arr1 (2) [haha, heihei](5)Tuple元组// 5. Tuple 元组 元组类型允许表示一个已知数量和类型的数组, 各元素类型可以不同
let basket: [string,number,string[]] [aaa, 12, [qe,as]]
console.log(basket); //[aaa, 12, Array(2)]
console.log(basket[2]); // [qe, as]
// 访问越界元素, 会使用联合类型替代
basket[4] 111
console.log(basket);(6)联合类型// 6. 联合类型 使用 | 分割
let fruit: string | number haha
fruit 5
console.log(fruit); // 5(7)Enum枚举// 7. Enum 枚举类型
enum Gender {男, 女, 未知}
let sex: Gender Gender.女
console.log(sex); // 1
sex2
console.log(sex); // 2
let sexName: string Gender[2]
console.log(sexName); // 未知(8)Any任意类型// 8. Any 任意类型 不希望类型检查器检查, 直接通过
let word: any hhhh
word 12
// 调用方法 编译时不报错, 但运行时会报错 没有该方法
// word.toUpperCase() //Uncaught TypeError: word.toUpperCase is not a function
// let word1: object 1 //对象的原型上也没有该方法, 故找不到
// word1.toUpperCase() // Uncaught TypeError: word1.toUpperCase is not a function
console.log(word);(9)Void没有任何类型// 9. Void 没有任何类型, 一般情况下用于函数的返回类型, 当函数没有返回值时,类型就为void
let fun1 (msg: string, age: number) {// 参数类型
}
let fun2 (msg: string, age: number) : void {// 函数也有类型, 没有返回值时,类型就为void
}
let fun3 (msg: string, age: number) : string {// 函数也有类型, 有返回值, 则为返回值的类型return aaaa
}(10)Null和Undefined // 10. Null 和 Undefined 默认情况, null和undefined是所有类型的子类型, 可以将null和undefined赋值给任意类型 常在联合类型中使用
let numUnd: number undefined
let numNull: null null
console.log(numUnd); // undefined
console.log(numNull); // null
console.log(numUnd numNull); // true
console.log(numUnd numNull); // false
// 联合类型中使用
function fun5(mes:string | undefined){console.log(mes);
}
fun5(mmmm) // mmm
fun5(undefined) // undefined(11)Never永不存在的值的类型// never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型 变量也可能是 never类型当它们被永不为真的类型保护所约束时。never类型是任何类型的子类型也可以赋值给任何类型然而没有类型是never的子类型或可以赋值给never类型除了never本身之外。 即使 any也不可以赋值给never。
// 11. Never 永不存在的值的类型 任何类型的子类型 只有never才能赋值给never类型
// 返回never的函数必须存在无法达到的终点 相当于死循环, 不终止
function error(message: string): never {throw new Error(message);
}
// 推断的返回值类型为never
function fail() {return error(Something failed);
}
// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {while (true) {}
}
(12)Object非原始数据类型// 12. Object 非原始数据类型, 定义Object类型的变量, 就可以使用Object中提供的方法 除numberstringbooleansymbolnull或undefined之外的类型。使用object类型就可以更好的表示像Object.create这样的API
let obj:object {name: zxk, age: 22, msg: sleeping in class!!!!!}
let obj1 {msg1: i have a story to tell you...,msg2: He said: I dont want to sleep!,msg3:two seconds later......,msg4:zxk has fallen asleep!!! hhhhhhhhh
}
console.log(,Object.keys(obj1)); //[msg1, msg2, msg3, msg4](13)类型断言// 类型断言 类似强制类型转换
// 有时候你会遇到这样的情况你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型
let username:any admin;
const len:number (username as string).length;
console.log(len); // 5参考文档: https://www.tslang.cn/docs/handbook/basic-types.html
