🐕

TypeScriptの学習

に公開
TypeScript
tech

基本情報

  • 変数の静的型付け
    • 型の変換ができない
    • 例）　numberからstringなど
      以下の方法だとエラーになる
var x: number = 10
x = "hello"
  • 型の種類
    • number
    • string
    • boolean
    • any
      • なんでもはいるが、型がかわるわけではない
var x; //var x: any
  • 関数
//一番後ろのnumberは返り値の型
function add(a: number, b: number): number {
	return a + b
}
console.log(add(5, 3))

返り値がない場合は、　voidを使用する

  • b?は値があるかわからない場合に使用する
  • ?を使用する場合は、ない場合の処理を書かないといけない
function add(a: number, b?: number): number {
	if(b){
		return a + b;
	} else {
		return a + a;
	}
}
console.log(5, 3) //8
console.log(5) //10
  • 初期値も渡せる
function add(a: number, b?: number = 10): number {
	return a + b
}

関数のオーバーロード

  • numberとstringの型を基準に関数を作成している
  • numberが来たらnumberの処理
  • stringならstringの処理
  • 関数部分の初期の型はany型を使用する
function add(a: number, b:number): number; //シグネチャ
function add(a: string, b:string)): string;

function add(a: any, b:any): any {
	if (typeof a === string && b === string) {
	return a + " " + b;
	} 
	return a + b;
}

console.log(add(5, 3)) //8
console.log(add("hello", "world")) //hello world
console.log(add("hello", 3)) // エラーになる

class

class User{
	/*
	name: string;
	constructor(name: string) {
		this.name = name;
	}
	*/
	//こんな感じで短くかける
	constructor(public name: string) {}
	sayHi(): void {
		console.log("hi! i am" + this.name)
	}
}

// インスタンス
var tom = new User("Tom")
console.log(tom.name)　// Tom
tom.sayHi() // hi! i am Tom

private

class User{
	constructor(private _name: string) {}
	sayHi(): void {
		console.log("hi! i am" + this.name)
	}
	
	//privateでもアクセスしたい場合はgetterを使用する
	get name(){
		return this._name
	}
	//値の設定
	set name(newValue: string) {
		this._name = newValue;
	}
}

//getを書かないとprivate部分にアクセスできない
//getがあるとアクセス可能
var tom = new User("Tom")
console.log(tom.name)　// Tom
tom.name = "TOM"
console.log(tom.name)//TOM
tom.sayHi() // hi! i am Tom

継承

class User {
	constructor(protected _name: string) {
		public sayHi(): void {
			console.log("hi! i am" + this.name)
		}
	}
}

//ユーザークラスの変数やメソッドを引き継ぎたい時に使用
class AdminUser extends User {
	private _age: number;
	//nameとageが渡ってくる
	constructor(_name: stirng, _age: number) {
		//親クラスのコンストラクターの使用
		super(_name);
		//ageはこの継承クラスで設定
		this._age = _age;
		
	}
	//親クラスの関数を引き継ぐが中身はメソッドのオーバーライドする
	public sayHi(): void {
		console.log("my age:" + this._age);
		//protected なら親クラスとそれを継承したクラス_nameを使用できる
		console.log("my name:" + this._name);
		//親クラスのsayHi（）を呼ぶ
		super.sayHi();
	}
}

var bob = new AdmingUser("Bob", 23);
//my age: 23
// hi! i am Bob
bob.sayHi();

公式サイト

https://www.typescriptlang.org/

参考サイト

  • Dotinstall_TypeScript

Discussion