HelloTypeScript
TypeScript:
微软推出,JavaScript超集
TypeScript:
Vue React NG
Type:类型
function add(a:number,b:number){
return a+b;
}
add(10,20);
add(10,"20"); // 报错
面向对象
class interface extends
ES5 -> prototype function object
规避一些bug问题
类型错误:
js:执行的时候发生错误
ts:编译的时候就已经发生了错误
打开控制台,输入
npm install -g typescript
再输入tsc发现不报错,表示安装成功
如何避免这样的重复输入? 只需在命令行输入tsc -w hello.ts
比如在hello.ts 里把30 改成300,hello.js中相应的部分也会动态的跟着改变
这样就可以实时监听到所有代码的修改
或者通过命令行输入cnpm install -g ts-node
此时通过ts-node ts文件名 就可以运行程序不需要.js文件了
或者若不想重复通过ts-node ts文件名来运行 想让 修改之后自动编译 则通过
安装 cnpm install -g nodemon
然后程序控制台输入 nodemon --exec ts-node ts文件名 此时只要保存就会编译
/**
*
* var
* let
* 1.作用域变化 var作用域是函数级别 let作用域是花括号
* 2.let不允许重复定义
* const
* 1.constant:常量,定义之后不允许修改的值
*
*/
var num:number = 10;
let age:number = 30;
// if(true){
// let demo:string = 'demo'
// console.log(demo);
// }
// for(let i = 0;i<5;i++){
// setTimeout(function(){
// console.log(i);
// })
// }
var num:number = 40;
const url:string = "http://iwenwiki.com";
// url = "http://iwens.org";
console.log(url);
/**
* 数组:
* 数组的声明两种方式
* let names:string[] = ["iwen","ime"];
* let list:Array<number> = [10,20,30];
*
* 一组数据
* 一组相同类型的数据
*
*/
let names:string[] = ["iwen","ime"];
let list:Array<number> = [10,20,30];
// console.log(names[0]);
// console.log(list[2]);
names.push("frank");
// names.push(100);
console.log(names);
names.map(function(ele,index){
console.log(ele);
})
/**
* 元组
* 元组类型允许表示一个已知元素数量和类型的数组
*/
let info:[string,number,boolean] = ['iwen',20,true];
console.log(info[1]);
info.filter(function(ele){
console.log(ele);
})
/**
* 函数
* 1.函数的声明,函数中的参数类型限定
* 2.箭头函数 () => {} 箭头函数解决this问题
* 3.函数的返回值问题:void
* 4.可选参数和Rest Parameters
*/
// function add(a:number,b:number = 10){
// return a+b
// }
// const add = (a:number,b:number) => {
// return a+b
// }
// console.log(add(10,20));
// setTimeout(() => {
// console.log(100);
// },3000)
// let obj = {
// username:"iwen",
// getName:function(){
// setTimeout(() => {
// console.log(this.username);
// })
// }
// }
// obj.getName()
// function add(a:number,b:number):string{
// return a.toString()+b.toString();
// }
// var sum = add(10,20);
// // console.log(sum.toFixed(2));
// console.log(sum.substr(0,3));
// function add(a:number,b:number):void{
// console.log(a+b);
// }
// add(10,20);
// function add(a:number,...num:number[]):number{
// return num.reduce(function(sum,n){
// return sum + n;
// },a)
// }
// console.log(add(10,20,30,40,50));
function add(a:number,b?:number):number{
if(b){
return a+b
}else{
return a;
}
}
console.log(add(10));
let a: any;
a = 10;
a = "Hello iwen";
a = [10,20];
console.log(a);
// 我们的使用Any类型的时候一定要注意,需要自己去处理类型判断的问题
const log = (value : any) => {
console.log(typeof value);
if(typeof value === 'number'){
return `数字类型:${value}`
}
if(typeof value === "string"){
return `字符串类型:${ value }`
}
throw new Error("类型错误");
}
let b:any[];
b = [10,'123',true];
console.log(b);
function isNumber(value:any):value is number{
return typeof value === "number";
}
function isString (value:any):value is string{
return typeof value === 'string';
}
// 数字 字符串
const log = (value : string | number ) => {
console.log(typeof value);
if(isNumber(value)){
return `数字类型:${value}`
}
if(isString(value)){
return `字符串类型:${ value }`
}
// throw new Error("类型错误");
}
console.log(log(undefined));
// es6 http://es6.ruanyifeng.com/#docs/class
class Person{
age:number;
name:string;
}
// 类的概念:
let p = new Person();
p.name = 'iwen';
p.age = 30;
console.log(p.name,p.age);
/**
* 玩游戏的时间管理
*
*/
class Game{
name:string;
play_time:number;
/**
* 构造函数:
* 随着类的实例化而自动执行的函数
*/
constructor(name,play_time){
// this 指向生成的Object本身
this.name = name;
this.play_time = play_time;
}
getPlayTime(){
return `时间:${this.play_time}分钟`;
}
// 额外申请游戏时间
incremntPlayTime(){
this.play_time += 10;
}
}
let xiaoming = new Game("小明",20);
console.log(`姓名:${xiaoming.name}`);
xiaoming.incremntPlayTime(); // 增加10分钟
console.log(xiaoming.getPlayTime());
let xiaohua = new Game("小花",60);
console.log(`姓名:${xiaohua.name}`);
xiaohua.incremntPlayTime();
xiaohua.incremntPlayTime();
xiaohua.incremntPlayTime();
console.log(xiaohua.getPlayTime());
/**
* 把类看成一个模板
* worker
* student
*/
class Person{
name:string;
age:number;
say(){
console.log("我是说话");
}
hello(){
console.log("hello World");
}
}
class Student extends Person{
// 就近原则
say(){
console.log("我是student的say方法");
}
hello(){
console.log("student Hello");
}
studentHello(){
super.hello(); // 强行调用父类的方法
}
}
// 多态
let s:Person = new Student();
s.say();//我是student的say方法
/**
* Public:
* 在任意地方都可以访问
* private:
* 只能在类的内部读取,不可以在外部读取,如果想读取,就在类的内部提供public的函数进行访问
* protected:
* 可以在类的内部访问,也可以在子类中进行访问
*
*
* 三者关系:Public > protected > private
*
*/
class Person{
protected name:string;
protected age:number;
// set和get方法
protected setName(name){
this.name = name;
}
protected getName():string{
return this.name;
}
protected say(){
console.log(`hello:${this.getName()}`);
}
}
class Student extends Person{
setStudentName(name){
this.name = name;
}
getStudentName(){
console.log(this.name);
}
}
let s = new Student();
s.setStudentName("iwen");
s.getStudentName();
/**
* static
* 脱离了类的实例化而被调用的
* 类名.属性或者方法名
*/
class Person{
name:string;
age:number;
private static all:string = "这是一个全新的属性";
public static say(){
console.log(Person.all);
}
constructor(name,age){
this.name = name;
this.age = age;
}
getName():string{
return this.name;
}
}
class Student extends Person{
constructor(name,age){
super(name,age)
}
}
// console.log(Person.all);
Person.say();
class Person{
name:string;
age:number;
// 不可以被修改的
readonly hello:string = 'Hello ReadOnly';
}
let p = new Person();
// p.hello = 'hello';
p.name = 'iwen';
console.log(p.hello);
console.log(p.name);
/**
* 一周7天
* 使用:三种状态
*/
enum DaysOfTheWeek{
SUM,MON,TUE,WED,THU,FRI,SAT
}
/**
*
* {
* 0:SUM,
* 1:MON,
* ...
* }
*/
console.log(DaysOfTheWeek.MON);
let day:DaysOfTheWeek;
day = DaysOfTheWeek.SAT
// 可读性
if(day === DaysOfTheWeek.SAT){
// todo
}
class Hello{
name:string;
constructor(name:string){
this.name = name;
}
say(){
console.log(this.name);
}
}
let h = new Hello("iwen");
h.say();
/**
* ts-node:ts-node filename.ts
* nodemon:nodemon --exec ts-node filename.ts
* 增加nodemon的配置文件:配置快捷执行方案:npm run dev
*/
/**
* 鸭子类型:
* 接口:通过的规范
* USB接口:U盘 打印机 ...
*
* ts:编译时候直接报错,而非在运行过程中因为某些不确定的因素而报错
*/
interface Named{
// 属性
name:string;
}
const sayName = (obj:Named) => {
console.log(obj.name);
}
const Person = {
name:'iwen',
age:20
}
const student = {
learn:"web",
name:"张三"
}
const demo = {
name:"hello"
}
class Teacher{
name:string;
age:number;
}
let t = new Teacher();
t.name = '张老师';
sayName(Person);
sayName(student);
sayName(t);
sayName(demo); // undefined
interface INamed{
// 属性
name:string;
// 方法 在接口中,定义方法是没有方法体的 但是返回值和类型一定要添加
print(name:string):void;
}
const sayName = (obj:INamed) => {
obj.print(obj.name);
}
const person = {
name:"iwen",
age:20,
print(name){
console.log(name);
}
}
class Student{
name:string;
age:20;
print(name){
console.log(name);
}
}
let s = new Student();
s.name = 'iwen';
sayName(person);
sayName(s);
// type Name = string;
// let myName:Name = 100;
// console.log(myName);
type User = {
name:string;
age:number
}
// type User = {
// emial:string;
// }
const adminUser:User = {
name:'iwen',
age:20
}
interface IUser {
name:string;
age:number
}
interface IUser{
email:string;
}
const interUser:IUser = {
name:"iwen",
age:20,
email:"iwen@iwenwiki.com"
}
console.log(interUser);
interface IPerson{
name:string;
say():void;
}
const sayWath = (content:IPerson) => {
content.say();
}
class Student implements IPerson{
name:string;
say(){
console.log("我要讨论学习");
}
}
class Tearch implements IPerson{
name:string;
say(){
console.log("如何教好学生");
}
}
let s = new Student();
s.say();
sayWath(s);
let t = new Tearch();
t.say();
sayWath(t);
/**
* 支付
* 微信
* 支付宝
* 银行卡
*/
interface IPay{
post():void;
}
// 操作方案:http请求 额外的业务操作
const do_Pay = (pay:IPay) => {
pay.post();
}
// 微信支付
class WeChatPay implements IPay{
post(){
console.log("微信支付");
}
}
// 支付宝支付
class AliPay implements IPay{
post(){
console.log("支付宝支付");
}
}
// 银行卡支付...
let wechat_pay:IPay = new WeChatPay();
do_Pay(wechat_pay);
let ali_pay:IPay = new AliPay();
do_Pay(ali_pay);
interface Person{
// 只读属性
readonly learn:string;
name:string;
// 可选属性
age?:number;
say():void;
hello?():string;
}
class Student implements Person{
name:string;
learn:string;
say(){
console.log("say");
}
}
let s:Person = new Student();
s.name = "iwen";
// s.learn = "web";
console.log(s.name);
s.say();
/**
* 断言和类型转换有点相似,但是并非真正的类型转换
*
*/
let x:any = "hi iwen";
// 编译的时候,是不知道什么类型的!!!
let s = (<string>x).substring(0,2);
function getLength(something:string|number):number{
if((<string>something).length){
return (<string>something).length;
}else{
return something.toString().length;
}
}
// console.log(getLength(200));
// 接口
interface Person{
name:string;
age:number;
}
let person = {} as Person;
person.name = "iwen";
person.age = 20;
// 第二种写法
let person1 = <Person> {
name:"iwen",
age:20
}
// 声明person2 是Person的类型
let person2:Person ={
name:"heloo",
age:20
}