Category Archives: TypeScript
Vue2.X集成typeScript
1.安装依赖
2.配置 webpack.base.conf.js
3.添加 tsconfig.json
4.让 ts 识别 .vue
5..js 文件重命名为.ts 文件
6.改造 .vue 文件
7.运行 npm run dev
8.让vue识别全局方法/变量
带你了解Typescript的14个基础语法
本文分享自华为云社区《Typescript基础语法全解析》，作者：北极光之夜。 。 一.Ts是什么： 首先，强类型不允许随意的隐式类型转换，而弱类型是允许的。JavaScript就是经典的弱类型语言。而Typescript可以说是JavaScript的超集，在JS的基础上新增了许多语法特性，使得类型不再可以随意转换，能大大减少开发阶段的错误。 二. 基本语法： 1.声明原始数据类型： 在变量后面指定一个关键字表示其只能为什么类型。 string类型：
|
1 |
const a: string = 'auroras' |
number类型：
|
1 |
const b: number = 666 // 包括 NAN Infinity |
boolean类型：
|
1 |
const c: boolean = true |
null类型：
|
1 |
const d: null = null |
undefined类型：
|
1 |
const e: undefined = undefined |
symbol类型：
|
1 |
const h: symbol = Symbol() |
2.声明Object类型： 首先，object类型不单单可以指定对象，还可以指定数组或函数：
|
1 2 3 |
const foo1: object = {}; const foo2: object = []; const foo3: object = function(){}; |
如果只想指定为对象，如下，对象属性都要提前声明好类型：
|
1 2 3 4 |
const obj: {name: string,age: number} = { name: '北极光', age:18 } |
3.1声明数组类型： 可以指定声明Array且通过<>指定元素类型，比如指定声明元素都为数字的数组：
|
1 |
const arr: Array<number> = [1,2,3] |
第二种方式如下，也指定声明元素都为数字的数组：
|
1 |
const arr: number[] = [1,2,3] |
3.2声明元组类型： 就是要提前指定数组里每个元素的类型，严格一一对应：
|
1 |
const tuple: [number,string,boolean] = [666,'auraros',true] |
4.声明枚举类型： 通过关键字enum声明一个枚举类型，如：
|
1 2 3 4 5 6 7 |
enum Status { pedding = 1, resolve = 2, reject = '3' } //访问 console.log(Status.pedding); |
如果全不写值，默认值为从0开始递增。如果第一个元素为字符类型，就必须全部定义值。如果第一个元素指定为一个数字，后面元素不写值，那值为第一个元素值按位置大小递增的结果。 5.函数参数与返回类型： 函数声明式： 指定函数传入参数类型，指定返回值类型，调用时传入参数个数与类型都必须相同： 括号里指定每个参数类型，括号右边指定返回值的类型。
|
1 2 3 4 |
function fun (name:string,age:number):string{ return 'sss' } fun('auroras',18); |
如果传入参数不确定传不传，那么可以给参数加个‘？’表明它是可选的：
|
1 2 3 4 |
function fun (name:string,age?:number):string{ return 'sss' } fun('auroras'); |
或者给参数添加默认值，那也会成为可选参数：
|
1 2 3 4 |
function fun (name:string,age:number=666):string{ return 'sss' } fun('auroras'); |
如果参数个数不确定，可以用扩展运算符加解构赋值表示，当然要传入与指定类型一致的：
|
1 2 3 4 |
function fun (name:string,age:number=666,...res:number[]):string{ return 'sss' } fun('auroras',1,2,3); |
函数表达式：
|
1 2 3 |
const fun2:(name:string,age:number)=>string = function(name:string,age:number){ return 'sss' } |
定义接口时再详细说。 6.任意类型： 通过指定any关键字表示任意类型，跟原来 js 一样，可以任意赋不同类型的值：
|
1 2 3 |
let num:any = 1; num = 'a'; num = true; |
7.类型断言： 类型断言就是明确的告诉typescript这个变量就是某种类型的，百分之百确定。不用typescript在一些情况下要自己推断某些没有明确定义或者多变的场景是什么类型。 可以通过 as+类型 断言它就是某种类型的：
|
1 2 |
const res = 1; const num = res as number; |
也可以通过 <类型> 形式断言（不推荐）：
|
1 2 |
const res = 1; const num = <number>res |
8.接口基本使用： 接口可以理解为一种规范，一种契约。可以约束一个对象里应该有哪些成员，这些成员都是怎么样的。 […]
View Details