こちらにとても上手な説明があります https://qiita.com/yamashin0616/items/f6f2405dba4570638228
(引用させていただきました。 ↑ )
// 例1 : constでLiteral Typesの型を宣言(Widening発生)
const foo: "foo" = "foo"; // Literal Typesの型を宣言
let bar = foo; // 変数fooを変数barに代入
bar = "bar"; // WideningによりErrorにならない
// 例2 : letでLiteral Typesの型を宣言(Wideningが発生しない)
let foo: "foo" = "foo"; // Literal Typesの型を宣言
let bar = foo; // 変数fooを変数barに代入
bar = "bar"; // 変数barの値は"foo"で固定されているため、Errorになる
// 例3 : as constでLiteral Typesの型を宣言(Wideningが発生しない)
const foo = "foo" as const; // as constで変数fooのLiteral Typesの型を宣言
let bar = foo; // 変数fooを変数barに代入
bar = "bar"; // 変数barの値は"foo"で固定されているため、Errorになる
一度定義した後の再代入を禁止する
例
const hoge1:number = 123;
hoge1 = 999; // エラー
オブジェクト型のプロパティにreadonly修飾子をつけることで使用できる。つまりプロパティ以外には使用できない。
ただオブジェクト自体を再代入して書き換えることはできる
例
type User = {
readonly id: number;
readonly name: string;
};
let user01:User = {
id: 1,
name:"Taro Yamada",
}
// エラー:読み取り専用プロパティであるため、'id' に代入することはできません。
user01.id = 2;
// OK
user01 = {
id: 999,
name:"Taro Nise",
}
TypeScript でコールバック関数の型定義をしたい場合は、call signature を付けた interface として定義すれば良い。関数もオブジェクトの一種だから。
interface callbackType{(argv :number) :void};
function func(callback:callbackType){
...
}
OR
指定した型のどれかにマッチすれば良い。
type DrinkOrFood = Drink | Food;
AND
指定した型の全てにマッチすれば良い。
type Drink AndFood = Drink & Food;
interface Drink AndFood extends Drink, Food {}
型ガード(例: data に x というプロパティがあるかどうか?)
if ('x' in data) {
}
interface MyData {
id: number;
name: string;
}
const myData: MyData=
{
id: 1,
name: 'hoge',
}
Object.keys(myData).map((key) => {
console.log(myData[key]); // ★ ここでエラー(TS7053)となります。
});
TS Playground
https://bit.ly/3KxxBgx
このようなエラーが表示されます
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'MyData'.
No index signature with a parameter of type 'string' was found on type 'MyData'.(7053)
Object.keys(myData).map((key) => {
console.log(myData[key]); // ★ ここでエラー(TS7053)となります。
});
↓ 次のように修正します
(Object.keys(myData) as (keyof MyData)[]).map((key) => {
console.log(myData[key]);
});
Object.entries(myData).map(([key, value]) => {
console.log( '● key, value' );
console.log( `${key} : ${value}` );
})
https://stackoverflow.com/questions/59545011/object-with-generic-keys-in-typescript
MyInterface の メンバ名であることを保証する関数を作成します。
name , address, email は適宜書き換えること
function isProperty(value: string): value is (keyof MyInterface){
return value === 'name' || value === 'address' || value === 'email';
}