在使用typescript编写项目之前，需要有一定的js【es6】基础知识。在学习ts的过程中，类比js的差异，做到基本结合。 开发中除去js报错的部分，大部分会受到ts的语义限定。
typescript基本内容
1. 变量申明
变量申明的时候，和js一样但又不一样。一样的是变量申明符号是一样的，不一样的是需要附加类型限定。如果你是一个强类型的语言开发者
// js的声明
var name;
let age;
const eat;
function play(bool){}
// ts的声明
var name:string;
let age:number;
const eat:Function; // Function是类型，而function是用来声明函数变量的，请不要用混
function run(bool:string):void {
/*
传参和基本一样，需要限定传值类型，
在函数的参数列表后面需要加上返回值限定
*/
}
类型申明时，有一个通用类型
any，这个表示这个变量可以接受任意类型的值，并且语法器也会忽略掉当前参数为null/undefined的情况。建议：除非特殊情况，尽量不要使用any作为参数类型，以便后期修改时，发生不必要的错误。
1.1 其他情况
// 大部分时候，我们会声明成这种情况
// 但是在使用时却发现，不能赋值，push值。
var classes:[];
// 实际上上面的那个等价于
var classes:Array<never>;
// 或者等价于
var classes:never[];
never ts独有的修饰类型，表示当前什么也没有。和undefined/null不同，ts只存在never的申明，不存在never这个值。
// 当使用
var a:never;
var b = a;
// 此时的a会被语法提示，在赋值前使用了a。因此，需要将a先初始化才能使用，但是又没有一种值叫never，因此a是无效的声明类型。
// 那么，我们一定要用呢？
// 借助数组实现
var a:never[] = [];
var b:never = a[0];
// 如果在对象里声明使用never呢？
var a = { b:never /*Error: “never”仅表示类型，但在此处却作为值使用。 */ }
2. class 面向对象的类
- 单独js写法和ts并无不同，并且不支持多继承
class A { }
class B extends A { }
//子类使用构造函数时，需要有效调用父级构造函数
class Animal {
name:string;
constructor(name:string){
this.name = name;
}
}
class Dog extends Animal {
constructor(name:string){
super(name)
}
}
- js没有
interface，但是在ts下有，支持多实现接口
interface A { }
interface B extends A { }
class C implements A,B { }
interface 可以用来类型限定吗？ 答案是可以。对于ts来说，所谓类型限定仅仅就是属性类型和名称相符合，和类型和名称没有太大关系
interface A { name: string; age: number }
interface B { name: string; age: number }
class C { name!: string; age!: number }
var a: A = new C;
var b: B = new C;
var c: C;
// 使用非空类型时，需要先初始化值才可以使用
// 否则就会报错 Error:在赋值前使用了变量“c”。
a = b = c;
3. 申明类型不可变
js支持var重复申明，ts有<条件>的支持重复声明
/* 后续变量声明必须属于同一类型。变量“a”必须属于类型“string”，但此处却为类型“number” */
var a:string;
var a:number;
// 重复声明印证了，类型只和属性相关，和名称无关
interface A { name: string; age: number }
interface B { name: string; age: number }
class C { name!: string; age!: number }
var a: A;
var a: B;
var a: C;
4.!: 与 ?:
在我们编写代码的时候，经常会遇到 !: ?:这两个组合符号，它们和 : 有什么不同？
!:表示一定存在，?:表示可能不存在 这两种在语法上叫赋值断言
因此：
/* : 可以在任何需要的场合使用 */
var a:number;
// 不可以申明变量的时候使用
var a!:number;
var a?:number;
// ?: 不可以字面量赋值时使用
var a = { name?:"Pluto" }
关于赋值断言：通常会在class中看见他们的身影
class a {
sad!: string;
// 肯定断言不能赋初值
sad!: string = 'so sad';
// 但是否定断言，就可以
age?: number = 2;
bg = { age!: 16 }
}
在Vue中最常见的肯定断言就是prop还有store引入了，因为我们确信他们已经存在了
@Component
export default class MyComponent extends Vue {
@Prop({ default : "" }) myName !: string;
@State mystate !: boolean;
}
在Vue中最常见的否定断言就是函数传参和类型定义
interface A {
name:string
/* 赋值时，age不是必选项，因此可以不使用 */
age?:number
}
var a:A = {
name:"16"
}
function getSome(some?:string){
/* 通常函数我们使用 给函数参数赋初始值的形式而不是用这种形式 */
return some||""
}
function getSome(some:string=""){
return some
}
5. 赋初值属性
ts中 class定义的属性如果没有赋初值，编译后是不存在的
class A {
name!:string;
}
new A() .hasOwnProperty("name") // false
更多内容 在线TS编译结果对照
