总结
前言
TypeScript基础知识
一、TypeScript是什么？
1、规范代码，类型检查
2、在代码编译阶段发现问题
3、在原生js基础上加了一层类型定义
4、支持javaScript 最新特性（包含ES6/7/8）
二、TypeScript的类型
1.Number 数字类型
let num: number = 0;2.String 字符串类型
let str: string = '1';3.Boolean 布尔类型
let bol: boolean = true;4.Array 数组类型
let list1: number[] = [1,2,3,4];
let list2: Array<number> = [1,2,3,4];
let list3 = [1,2,3,4];
let list4 = [1,'string'];
let list5:any[] = [1,'string',true];5.tuple 元组类型
// 固定长度，固定类型的Array
let work1: [number, string] = [1,'str'];
work1[0] = 'aaa'; // error
work1[1] = 123; // error
work1[2] = 111; // error
tuple 使用注意：
元组类型有个bug：无限度的给数组添加元素（push）
声明一个元祖的时候一定要指明类型
6.Union 联合类型
// 一个变量可以同时支持几个类型
let union : string | number;
union = 2;
union = 'str';
// union = true;
let union2 : number | string | boolean | string[];
function merge(n1: number | string, n2: number | string) {
if(typeof n1 === 'string' || typeof n2 === 'string')
return n1.toString() + n2.toString();
else
return n1 + n2;
}
let mergeNumber = merge(1,2);
let mergeString = merge('cc','dd');
console.log(mergeNumber); // 3
console.log(mergeString); // ccdd7.Literal 字面量类型
let union3: 0 | 1 | 2;
union3 = 1;
// union3 = 4;
let literal : 1 | '2' | true | [1,2,3,4];
function merge(
n1: number|string,
n2: number|string,
resultType:'as-number'|'as-string'
) {
if(resultType === 'as-string') {
return n1.toString() + n2.toString();
}
if(typeof n1 === 'string' || typeof n2 === 'string')
return n1.toString() + n2.toString();
else
return n1 + n2;
}
let mergeNumber = merge(1,2,'as-number');
let mergeNumber2 = merge(1,2,'as-string');
let mergeString = merge('cc','dd','as-string');
console.log(mergeNumber); // 3
console.log(mergeNumber2); // 12
console.log(mergeString); // ccdd8.Enum 枚举类型
// 枚举类型，真正的类型数据是数字，默认从0开始，也可以自定义
enum Color {
red,
green,
blue
}
let color = Color.blue;
console.log(color); // 2(定义的顺序)
enum Color1 {
red=5,
green,
blue
}
let color1 = Color1.blue;
console.log(color1); // 7
enum Color2 {
red=5,
green=10,
blue=1
}
let color2 = Color2.blue;
console.log(color2); // 1
enum Color3 {
red='red',
green='green',
blue=1
}
let color3 = Color3.green;
console.log(color3); // green9.any 和 unknown
let any1: any = 666;
any1 = true;
any1 = 'str';
any1 = {};
any1(); // error
any1.toUpperCase();
// unknown 不保证类型，能保证类型安全，确定变量类型才能正常使用
let any2: unknown = 666;
any2 = true;
any2 = 'str';
any2 = {};
// any2(); //error
// any2.toUpperCase(); // error
if(typeof any2 === 'function){
any2();
}
if(typeof any2 === 'string'){
any2.toUpperCase();
}10.void/undefined与 Never
// void 没有返回值
function printResult() : void {
console.log('aaaa');
}
console.log('123 ', printResult()) // 123 undefined
// undefined 返回值为 undefined
function printResult() : undefined {
console.log('aaaa');
return
}
console.log('123 ', printResult()) // 123 undefined
// never 函数永远不会执行完成（大部分处理异常）
function throwError(message: string, errorCode: number): never {
throw {
message,
errorCode
}
} // 函数永远不会执行到这里
throwError('not found',404)
function whileLoop(): never {
while(true){
console.log(111)
}
}11.Type Assertions 类型适配（类型断言）
// 明确知道类型，谨慎使用
let message : any;
message = 'abc';
message.endsWith('c');
let a = (<string>message).endsWith('c');
let b = (message as string).endsWith('c');12.函数类型
let log = function(message) {
console.log(message);
}
let log2 = (message: string) => console.log(message);
log2('hello');
// log2(2); // error
// log2(true); // error
let log3 = (message: string, code?: number) => {
console.log(message, code);
}
log3('hello'); // code不传默认undefined
let log4 = (message: string, code: number = 0) => {
console.log(message, code);
}
log4('hello'); // code不传默认0三、TypeScript面向对象
1.object 对象类型
// ts 自动给变量匹配类型
const person = {
local: '北京',
work: '前端',
age: 18
}
console.log(person);
// console.log(person.a); // error
const person1: {
local: string,
work: string,
age: number
} = {
local: '北京',
work: '前端',
age: 18
}
console.log(person);2.Interface 接口
let drawPoint = (point: Point) => {
console.log({x: point.x, y: point.y});
}
drawPoint({x: 105, y: 204});
// drawPoint({x: '文字1', y: '文字2'});
// drawPoint({a: '哈哈', b: '123'});
interface Point {
x: number;
y: number;
}
// 高内聚（功能相关的放在一个集合形成一个模块）、低耦合（模块应该互相独立，不同模块保持低耦合）3.Class 类
interface IPoint {
x: number;
y: number;
drawPoint: () => void;
getDistances: (p: IPoint) => number;
}
class Point implements IPoint {
x: number;
y: number;
constructor(x?: number, y?: number) {
this.x = x;
this.y = y;
}
drawPoint = () => {
console.log('x: ',this.x, ' y: ',this.y);
}
getDistances = (p: IPoint) => {
return Math.pow(p.x-this.x, 2) + Math.pow(p.y-this.y, 2);
}
}
const point = new Point(2,3);
// point.x = 2;
// point.y = 3;
point.drawPoint();4.Access Modifier 访问修饰符
publice private
interface IPoint {
drawPoint: () => void;
getDistances: (p: IPoint) => number;
X: number;
//setX: (value) => void;
//getX: () => number;
setY: (value) => void;
getY: () => number;
}
class Point implements IPoint {
// x: number;
// y: number;
constructor(private x: number, private y: number=2) {
// this.x = x;
// this.y = y;
}
drawPoint = () => {
console.log('x: ',this.x, ' y: ',this.y);
}
getDistances = (p: IPoint) => {
return Math.pow(p.X-this.x, 2) + Math.pow(p.getY()-this.y, 2);
//return 0;
}
//setX = (value: number) => {
// if(value < 0){
// throw new Error('value不能小于0');
// }
// this.x = value;
//}
set X (value: number) {
if(value < 0){
throw new Error('value不能小于0');
}
this.x = value;
}
get X () {
return this.x;
}
setY = (value: number) => {
if(value < 0){
throw new Error('value不能小于0');
}
this.y = value;
}
getY = () => {
return this.y;
}
}
const point = new Point(2,3);
point.setX(10);
// point.setX(-10);
console.log(point.getX())
// 懒人包编译需ES5以上
tsc -t es5 index.ts5.Generics 泛型
let list1: number[] = [1,2,3,4];
let list2: Array<string> = [1,2,3,4];
let lastInArray = <T>(arr: T[]) =>{
return arr[arr.length - 1];
}
const l1 = lastInArray([1,2,3,4]);
const l2 = lastInArray(['a','b','c','d']);
const l3 = lastInArray<string | number>(['a','b',1]);
let makeTuple = <T, Y = 'string'>(x: T, y: Y) => [x, y];
const v1 = makeTuple(1,'one');
const v2 = makeTuple<boolean, number>(true,'one');
总结
以上是TypeScript基础，还需深入学习。
969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
